import * as echarts from "echarts";
import { useState, useEffect } from "react";
import axios from 'axios'
import './visitor.css'
export default function App() {
    let [user_city, setCity] = useState([])
    useEffect(() => {
        axios.get('https://elm.cangdu.org/v1/user/city/count').then(res => {
            console.log(res);
            if (res.data.status == 1) {
                user_city = res.data.user_city
                setCity(user_city)
            }
        })
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            title: {
                text: '用户分布',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: user_city.beijing, name: '北京' },
                        { value: user_city.shanghai, name: '上海' },
                        { value: user_city.shenzhen, name: '深圳' },
                        { value: user_city.hangzhou, name: '杭州' },
                        { value: user_city.qita, name: '其他' }
                    ],
                    color: ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae'],
                }
            ]
        };
        option && myChart.setOption(option);
    })

    return <div id="main"></div>
}